<!DOCTYPE html>
<html>
<head>
          <meta charset="utf-8"/>
          <title>个人中心</title>
          <style type="text/CSS">
                   body
                   {
                     background-color:skyblue;
                   }
                   form
                   {
                      margin-left:5%;
                      margin-top:2%;
                   }
                   
                   table,tr
                   {
                           width:70%;
                   }
                    td
                    {
                      width:10%;
                      height:50px;
                      font-size:20px;
                    }
                    
                    td:last-child
                    {
                      width:   40%;
                    }
                    
                    input[type="text"] 
                    {
                      width:90%;
                      height:70%;
                      border-radius:10px;
                      
                    }
                    img
                    {
                       position:absolute;
                       left:80%;   
                       border-radius:50%;
                    }
                    select
                    {
                      width:30%;
                      height:30px;
                      border-radius:10px;
                    }
          </style>
    <script src="jQuery.js"></script>
</head>
<body>       
                <img src="images/光哥.jpg" id="myimg" alt="这是你的头像"/>
            <form name="my_form" action="#" method="get" id="myform">
                  <table>
                         <tr>
                             <td><h1>基本信息</h1></td>
                         </tr>
                  </table>  
                   
                  <table>
                          <tr>
                             <td>学号</td>
                             <td>
                                  <input type="text" name="xuehao" >
                             </td>
                             </tr>

                             <tr>
                             <td>姓名</td>
                             <td>

                                  <input type="text" name="Sname">

                             </td>
                             </tr>

                             <tr>
                             <td>性别</td>
                             <td>
    
                                <input type="radio" name="sex" value="女">女
                                <input type="radio" name="sex" value="男">  男

                             </td>
                             </tr>

                             <tr>
                             <td>身份证号</td>
                             <td>

                                 <input type="text" name="IDCard">

                             </td>
                             </tr>

                             <tr>
                             <td>民族</td>
                             <td>

                                    <input type="text" name="mz" >
            
                             </td>
                             </tr>

                             <tr>
                             <td>籍贯</td>
                             <td>

                                  <input type="text" name="jguan">

                              </td>
                              </tr>

                              <tr>
                              <td>出生日期</td>
                              <td>
           
                                 <input type="text" name="birth">

                               </td>
                               </tr>
      
                               <tr>
                               <td>政治面貌</td>
                               <td>

                                     <input type="radio" name="mianmao" value="共青团员">共青团员
                                     <input type="radio" name="mianmao" value="预备党员">预备党员
                                     <input type="radio" name="mianmao" value="党员">党员
                               </td>
                               </tr>
                           
                </table>

                <hr/>
              
                <table>
                          
                         <tr>
                             <td>在校信息</td>
                         </tr>

                  </table>  
 
                   <hr/>

                  <table>
           
                       <tr>
                       <td>入学日期</td>
                       <td>

                           <input type="text" name="riqi">

                       </td>
                       </tr>

                       <tr>
                       <td>系所</td>
                       <td>
 
                          <select name="yuan" >
          
                               <option value="通信工程院">通信工程院</option>
                               <option value="电子工程院">电子工程院</option>
                               <option value="计算机学院">计算机学院 </option>
                               <option value="机电工程学院">机电工程学院</option>
                          
                          </select>

                       </td>
                       </tr>

                       <tr>
                       <td>专业</td>
                       <td>

                             <select name="zhuanye">
                                  <option value="计算机科学与技术">计算机科学与技术</option>
                                  <option value="网络工程">网络工程</option>
                                  <option value="物联网">物联网</option>
                              </select>
                       </td>
                       </tr>

                       <tr>
                       <td>专业方向</td>
                       <td>

                         <select name="fangxiang">
                     
                               <option value="计科软件方向">计科软件方向</option>
                               <option value="计科网络方向">计科网络方向</option>
                               <option value="计科视觉方向">计科视觉方向</option>
                               <option value="计科嵌入式方向">计科嵌入式方向</option>
                               <option value="其他">其他</option>

                         </select>
               
                       </td>
                       </tr>

                       <tr>
                       <td>年级</td>
                       <td>

                          <select name="nianji">
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                                <option value="2016">2016</option>
                          </select>
                        </td> 
                        </tr>
                        <tr>
                        <td>班级</td>
                        <td>
                            <input type="text" name="banji">
                        </td>
                        </tr>

                      </table>
                     <hr/>   
                      </form>
</body>
<script>
    var userid = '<%=userid%>';
    window.onload = function () {
        var data = {"userid":userid};
        $.ajax({
            url:"/Center_back",
            data:data,
            dataType:'json',
            success:function (data,name) {
                if(name=="success")
                {
                    var ss = Object.keys(data);
                   var inputdom =  $('input[type="text"]');
                   var inputlen = inputdom.length;
                   var  j = 0;
                   for(var i = 0;i < inputlen;i++) // input框的回填处理
                   {
                        switch (i)
                        {
                            case 2:  j=3; break;
                            case 6: j = 8;break;
                            case 7:j =13;break;
                            default:break;
                        }
                        if(data[ss[j]] != null || data[ss[j]]!=undefined)
                        {
                            if(i == 5||i==6)
                            {
                                var strr = new Date(data[ss[j]]);
                                var tempbirth = strr.getFullYear()+"-"+(strr.getMonth()+1)+"-"+strr.getDate();
                                inputdom[i].value=tempbirth;
                                j++;
                                continue;
                            }
                            inputdom[i].value=data[ss[j]];
                        }
                            j++;
                   }
                    data[ss[2]]?$('input[name="sex"][value='+data[ss[2]]+']').attr("checked",true):1;//radio的回填
                    data[ss[7]]?$('input[name="mianmao"][value='+data[ss[7]]+']').attr("checked",true):1;

                    var selectdom = $('select');//select选项的回填
                    var selectlen = selectdom.length,k = 9;
                    for(var i=0;i<selectlen;i++)
                    {
                        if(data[ss[k]])
                        {
                            selectdom[i].value = data[ss[k]];
                        }
                        k++;
                    }
                    data[ss[13]]?$('#myimg').attr('src',data[ss[14]]):1;
                    //回填表格
                    $('#myform input').attr("disabled","disabled");
                    $('#myform select').attr("disabled","disabled");
                }
            }
        });
    };
</script>


</html>